<template>
  <div class="comics-container">
    <AppHeader />

    <div class="content-wrapper">
      <!-- 侧边导航 -->
      <SideNav 
        :title="'漫画'"
        :tabs="tabs"
        :active-tab="activeTab"
        @tab-click="handleTabClick"
      />

      <!-- 主要内容区域 -->
      <main class="comics-main">
      <!-- 推荐漫画 -->
      <section v-if="activeTab === 'recommend'" class="comics-section">
        <h2 class="section-title">推荐漫画</h2>
        
        <!-- 热门推荐轮播 -->
        <div class="featured-carousel">
          <div class="carousel-item" v-for="(comic, index) in featuredComics" :key="index" :class="{ active: currentSlide === index }">
            <div class="carousel-content" @click="openComicDetail(comic)">
              <img :src="comic.banner" :alt="comic.title" class="carousel-image" />
              <div class="carousel-info">
                <h3 class="carousel-title">{{ comic.title }}</h3>
                <p class="carousel-desc">{{ comic.description }}</p>
                <div class="carousel-stats">
                  <span class="stat-item">作者: {{ comic.author }}</span>
                  <span class="stat-item">人气: {{ comic.views }}万</span>
                  <span class="stat-item">{{ comic.updateStatus }}</span>
                </div>
                <div class="carousel-actions">
                  <button class="btn-read" @click.stop="readComic(comic)">立即阅读</button>
                  <button class="btn-follow" @click.stop="followComic(comic)">
                    {{ isFollowing(comic.id) ? '已收藏' : '收藏' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 轮播控制 -->
          <div class="carousel-controls">
            <button class="carousel-prev" @click="prevSlide">&lt;</button>
            <button class="carousel-next" @click="nextSlide">&gt;</button>
          </div>
          
          <!-- 轮播指示器 -->
          <div class="carousel-indicators">
            <button 
              v-for="(comic, index) in featuredComics" 
              :key="index"
              class="indicator" 
              :class="{ active: currentSlide === index }"
              @click="currentSlide = index"
            ></button>
          </div>
        </div>

        <!-- 人气漫画 -->
        <div class="hot-comics-section">
          <div class="section-header">
            <h3 class="category-title">人气漫画</h3>
            <a href="#" class="view-more">查看更多</a>
          </div>
          <div class="comics-grid">
            <div 
              v-for="comic in hotComics" 
              :key="comic.id" 
              class="comic-card"
              @click="openComicDetail(comic)"
            >
              <div class="comic-cover">
                <img :src="comic.cover" alt="{{ comic.title }}" />
                <div v-if="comic.isNew" class="new-badge">新漫</div>
                <div v-if="comic.isExclusive" class="vip-badge">独家</div>
                <div class="comic-update">{{ comic.updateInfo }}</div>
              </div>
              <h4 class="comic-title">{{ comic.title }}</h4>
              <div class="comic-meta">
                <span class="comic-author">{{ comic.author }}</span>
                <span class="comic-tags" v-for="tag in comic.tags.slice(0, 2)" :key="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分类推荐 -->
        <div class="category-section" v-for="category in featuredCategories" :key="category.name">
          <div class="section-header">
            <h3 class="category-title">{{ category.name }}</h3>
            <a href="#" class="view-more">查看更多</a>
          </div>
          <div class="comics-grid">
            <div 
              v-for="comic in category.comics" 
              :key="comic.id" 
              class="comic-card"
              @click="openComicDetail(comic)"
            >
              <div class="comic-cover">
                <img :src="comic.cover" alt="{{ comic.title }}" />
                <div class="comic-update">{{ comic.updateInfo }}</div>
              </div>
              <h4 class="comic-title">{{ comic.title }}</h4>
              <div class="comic-meta">
                <span class="comic-author">{{ comic.author }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 最新更新 -->
      <section v-else-if="activeTab === 'new'" class="comics-section">
        <h2 class="section-title">最新更新</h2>
        <div class="filter-bar">
          <div class="filter-options">
            <button 
              v-for="filter in filters" 
              :key="filter.key" 
              class="filter-button"
              :class="{ active: activeFilter === filter.key }"
              @click="activeFilter = filter.key"
            >
              {{ filter.name }}
            </button>
          </div>
          <div class="sort-options">
            <select v-model="sortBy" class="sort-select">
              <option value="latest">最新更新</option>
              <option value="popularity">人气优先</option>
              <option value="rating">评分优先</option>
            </select>
          </div>
        </div>
        
        <div class="comics-updates-grid">
          <div 
            v-for="comic in newUpdates" 
            :key="comic.id" 
            class="update-item"
            @click="openComicDetail(comic)"
          >
            <div class="update-cover">
              <img :src="comic.cover" alt="{{ comic.title }}" />
            </div>
            <div class="update-info">
              <div class="update-header">
                <h4 class="update-title">{{ comic.title }}</h4>
                <span class="update-badge" v-if="comic.isNew">新漫</span>
              </div>
              <p class="update-desc">{{ comic.description }}</p>
              <div class="update-meta">
                <span class="update-chapter">{{ comic.latestChapter }}</span>
                <span class="update-time">{{ comic.updateTime }}</span>
                <button class="btn-brief" @click.stop="readComic(comic)">速看</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 分类浏览 -->
      <section v-else-if="activeTab === 'categories'" class="comics-section">
        <h2 class="section-title">漫画分类</h2>
        
        <div class="category-tags">
          <button 
            v-for="category in allCategories" 
            :key="category.key" 
            class="category-tag"
            :class="{ active: activeCategoryTags.includes(category.key) }"
            @click="toggleCategory(category.key)"
          >
            {{ category.name }}
          </button>
        </div>
        
        <div class="comics-grid">
          <div 
            v-for="comic in filteredComicsByTags" 
            :key="comic.id" 
            class="comic-card"
            @click="openComicDetail(comic)"
          >
            <div class="comic-cover">
              <img :src="comic.cover" alt="{{ comic.title }}" />
              <div class="comic-update">{{ comic.updateInfo }}</div>
            </div>
            <h4 class="comic-title">{{ comic.title }}</h4>
            <div class="comic-meta">
              <span class="comic-author">{{ comic.author }}</span>
              <span class="comic-rating">{{ comic.rating }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 我的漫画 -->
      <section v-else-if="activeTab === 'my'" class="comics-section">
        <h2 class="section-title">我的漫画</h2>
        
        <div class="my-comics-tabs">
          <button 
            v-for="tab in myComicsTabs" 
            :key="tab.key" 
            class="tab-button"
            :class="{ active: activeMyComicsTab === tab.key }"
            @click="activeMyComicsTab = tab.key"
          >
            {{ tab.name }}
          </button>
        </div>
        
        <div v-if="activeMyComicsTab === 'reading'" class="comics-grid">
          <div 
            v-for="comic in readingComics" 
            :key="comic.id" 
            class="comic-card"
            @click="openComicDetail(comic)"
          >
            <div class="comic-cover">
              <img :src="comic.cover" alt="{{ comic.title }}" />
              <div class="progress-bar">
                <div class="progress" :style="{ width: comic.progress + '%' }"></div>
              </div>
            </div>
            <h4 class="comic-title">{{ comic.title }}</h4>
            <div class="comic-progress">
              已读至: {{ comic.currentChapter }}
            </div>
            <button class="btn-continue" @click.stop="continueReading(comic)">继续阅读</button>
          </div>
        </div>
        
        <div v-else-if="activeMyComicsTab === 'favorites'" class="comics-grid">
          <div 
            v-for="comic in favoriteComics" 
            :key="comic.id" 
            class="comic-card"
            @click="openComicDetail(comic)"
          >
            <div class="comic-cover">
              <img :src="comic.cover" alt="{{ comic.title }}" />
              <div class="favorite-icon">❤️</div>
              <div class="comic-update">{{ comic.updateInfo }}</div>
            </div>
            <h4 class="comic-title">{{ comic.title }}</h4>
            <div class="comic-meta">
              <span class="comic-author">{{ comic.author }}</span>
              <span class="comic-rating">{{ comic.rating }}</span>
            </div>
          </div>
        </div>
      </section>
    </main>
    </div>
    
    <footer class="app-footer">
      <div class="footer-content">
        <p>© 2024 漫画中心 - 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import SideNav from '../components/SideNav.vue'

export default {
  name: 'ComicsView',
  components: {
    AppHeader,
    SideNav
  },
  methods: {
    handleTabClick(tabKey) {
      this.activeTab = tabKey
    }
  },
  setup() {
    // 导航标签
    const tabs = ref([
      { key: 'recommend', name: '推荐' },
      { key: 'new', name: '最新更新' },
      { key: 'categories', name: '分类' },
      { key: 'my', name: '我的', badge: '5' }
    ])
    
    const activeTab = ref('recommend')
    const currentSlide = ref(0)
    const filters = ref([
      { key: 'all', name: '全部' },
      { key: 'completed', name: '已完结' },
      { key: 'ongoing', name: '连载中' },
      { key: 'vip', name: 'VIP' }
    ])
    const activeFilter = ref('all')
    const sortBy = ref('latest')
    const myComicsTabs = ref([
      { key: 'reading', name: '最近阅读' },
      { key: 'favorites', name: '我的收藏' }
    ])
    const activeMyComicsTab = ref('reading')
    const activeCategoryTags = ref([])
    const followedComics = ref(new Set())

    // 精选漫画数据
    const featuredComics = ref([
      {
        id: 1,
        title: '全职高手',
        author: '蝴蝶蓝',
        description: '网游荣耀中被誉为教科书级别的顶尖高手，因为种种原因遭到俱乐部的驱逐，离开职业圈的他寄身于一家网吧成了一个小小的网管，但是，拥有十年游戏经验的他，在荣耀新开的第十区重新投入了游戏，带着对往昔的回忆，和一把未完成的自制武器，开始了重返巅峰之路。',
        banner: 'https://picsum.photos/id/250/800/400',
        cover: 'https://picsum.photos/id/250/200/300',
        views: 1200,
        updateStatus: '连载中'
      },
      {
        id: 2,
        title: '一人之下',
        author: '米二',
        description: '被异人组织“哪都通”发掘的张楚岚，为了解开爷爷和自己身上的秘密，与冯宝宝一同进入了“异人”的世界，从而卷入了“异人”世界的种种谜团和争斗中。',
        banner: 'https://picsum.photos/id/251/800/400',
        cover: 'https://picsum.photos/id/251/200/300',
        views: 980,
        updateStatus: '连载中'
      },
      {
        id: 3,
        title: '镖人',
        author: '许先哲',
        description: '大漠边陲，镖局少镖头小七带着镖队走镖，遭遇马贼截杀。危急时刻，一个神秘的镖客出手相救。这个镖客身上隐藏着怎样的秘密？又将把小七带入怎样的江湖？',
        banner: 'https://picsum.photos/id/252/800/400',
        cover: 'https://picsum.photos/id/252/200/300',
        views: 750,
        updateStatus: '连载中'
      }
    ])

    // 人气漫画数据
    const hotComics = ref([
      {
        id: 1,
        title: '全职高手',
        author: '蝴蝶蓝',
        cover: 'https://picsum.photos/id/250/200/300',
        tags: ['热血', '游戏', '竞技'],
        updateInfo: '更新至第123话',
        isNew: false,
        isExclusive: true
      },
      {
        id: 2,
        title: '一人之下',
        author: '米二',
        cover: 'https://picsum.photos/id/251/200/300',
        tags: ['玄幻', '动作', '冒险'],
        updateInfo: '更新至第456话',
        isNew: false,
        isExclusive: false
      },
      {
        id: 3,
        title: '镖人',
        author: '许先哲',
        cover: 'https://picsum.photos/id/252/200/300',
        tags: ['武侠', '古风', '热血'],
        updateInfo: '更新至第234话',
        isNew: false,
        isExclusive: true
      },
      {
        id: 4,
        title: '斗罗大陆',
        author: '唐家三少',
        cover: 'https://picsum.photos/id/253/200/300',
        tags: ['玄幻', '热血', '冒险'],
        updateInfo: '更新至第789话',
        isNew: false,
        isExclusive: false
      },
      {
        id: 5,
        title: '斗破苍穹',
        author: '天蚕土豆',
        cover: 'https://picsum.photos/id/254/200/300',
        tags: ['玄幻', '热血', '成长'],
        updateInfo: '全本共567话',
        isNew: false,
        isExclusive: false
      },
      {
        id: 6,
        title: '元尊',
        author: '天蚕土豆',
        cover: 'https://picsum.photos/id/255/200/300',
        tags: ['玄幻', '热血', '冒险'],
        updateInfo: '更新至第345话',
        isNew: true,
        isExclusive: false
      }
    ])

    // 分类推荐
    const featuredCategories = ref([
      {
        name: '热血少年',
        comics: [
          { id: 101, title: '海贼王', author: '尾田荣一郎', cover: 'https://picsum.photos/id/256/200/300', updateInfo: '更新至第1123话' },
          { id: 102, title: '火影忍者', author: '岸本齐史', cover: 'https://picsum.photos/id/257/200/300', updateInfo: '全本共700话' },
          { id: 103, title: '死神', author: '久保带人', cover: 'https://picsum.photos/id/258/200/300', updateInfo: '全本共686话' },
          { id: 104, title: '一拳超人', author: 'ONE', cover: 'https://picsum.photos/id/259/200/300', updateInfo: '更新至第234话' }
        ]
      },
      {
        name: '恋爱日常',
        comics: [
          { id: 201, title: '辉夜大小姐想让我告白', author: '赤坂明', cover: 'https://picsum.photos/id/260/200/300', updateInfo: '全本共282话' },
          { id: 202, title: '我的青春恋爱物语果然有问题', author: '渡航', cover: 'https://picsum.photos/id/261/200/300', updateInfo: '全本共140话' },
          { id: 203, title: '月刊少女野崎君', author: '椿泉', cover: 'https://picsum.photos/id/262/200/300', updateInfo: '全本共167话' },
          { id: 204, title: '青春猪头少年不会梦到兔女郎学姐', author: '鸭志田一', cover: 'https://picsum.photos/id/263/200/300', updateInfo: '更新至第123话' }
        ]
      }
    ])

    // 最新更新
    const newUpdates = ref([
      {
        id: 301,
        title: '全职高手',
        cover: 'https://picsum.photos/id/250/200/300',
        description: '网游荣耀中被誉为教科书级别的顶尖高手，因为种种原因遭到俱乐部的驱逐...',
        latestChapter: '第123话 荣耀归来',
        updateTime: '5分钟前',
        isNew: false
      },
      {
        id: 302,
        title: '一人之下',
        cover: 'https://picsum.photos/id/251/200/300',
        description: '被异人组织"哪都通"发掘的张楚岚，为了解开爷爷和自己身上的秘密...',
        latestChapter: '第456话 异人世界',
        updateTime: '25分钟前',
        isNew: false
      },
      {
        id: 303,
        title: '镖人',
        cover: 'https://picsum.photos/id/252/200/300',
        description: '大漠边陲，镖局少镖头小七带着镖队走镖，遭遇马贼截杀...',
        latestChapter: '第234话 大漠风云',
        updateTime: '1小时前',
        isNew: false
      },
      {
        id: 304,
        title: '星空奇缘',
        cover: 'https://picsum.photos/id/264/200/300',
        description: '普通高中生意外获得了宇宙探险的能力，开启了一段奇妙的星际之旅...',
        latestChapter: '第1话 意外的相遇',
        updateTime: '3小时前',
        isNew: true
      }
    ])

    // 所有分类标签
    const allCategories = ref([
      { key: 'fantasy', name: '玄幻' },
      { key: 'martial', name: '武侠' },
      { key: 'romance', name: '恋爱' },
      { key: 'comedy', name: '搞笑' },
      { key: 'action', name: '动作' },
      { key: 'adventure', name: '冒险' },
      { key: 'school', name: '校园' },
      { key: 'sci-fi', name: '科幻' },
      { key: 'mystery', name: '悬疑' },
      { key: 'horror', name: '恐怖' },
      { key: 'slice-of-life', name: '日常' },
      { key: 'sports', name: '体育' }
    ])

    // 所有漫画数据（用于标签筛选）
    const allComics = ref([...hotComics.value, ...newUpdates.value.slice(0, 4)])

    // 最近阅读
    const readingComics = ref([
      {
        id: 401,
        title: '全职高手',
        cover: 'https://picsum.photos/id/250/200/300',
        currentChapter: '第98话',
        progress: 75
      },
      {
        id: 402,
        title: '一人之下',
        cover: 'https://picsum.photos/id/251/200/300',
        currentChapter: '第345话',
        progress: 65
      },
      {
        id: 403,
        title: '镖人',
        cover: 'https://picsum.photos/id/252/200/300',
        currentChapter: '第189话',
        progress: 80
      }
    ])

    // 收藏漫画
    const favoriteComics = ref([
      {
        id: 501,
        title: '全职高手',
        author: '蝴蝶蓝',
        cover: 'https://picsum.photos/id/250/200/300',
        rating: 9.8,
        updateInfo: '更新至第123话'
      },
      {
        id: 502,
        title: '一人之下',
        author: '米二',
        cover: 'https://picsum.photos/id/251/200/300',
        rating: 9.5,
        updateInfo: '更新至第456话'
      },
      {
        id: 503,
        title: '镖人',
        author: '许先哲',
        cover: 'https://picsum.photos/id/252/200/300',
        rating: 9.6,
        updateInfo: '更新至第234话'
      },
      {
        id: 504,
        title: '斗罗大陆',
        author: '唐家三少',
        cover: 'https://picsum.photos/id/253/200/300',
        rating: 9.2,
        updateInfo: '更新至第789话'
      }
    ])

    // 计算属性：根据标签筛选的漫画
    const filteredComicsByTags = computed(() => {
      if (activeCategoryTags.value.length === 0) {
        return allComics.value
      }
      return allComics.value.filter(comic => {
        return comic.tags && comic.tags.some(tag => 
          activeCategoryTags.value.includes(tag.toLowerCase().replace(/[^\w]/g, '-'))
        )
      })
    })

    // 轮播控制
    const prevSlide = () => {
      currentSlide.value = (currentSlide.value - 1 + featuredComics.value.length) % featuredComics.value.length
    }

    const nextSlide = () => {
      currentSlide.value = (currentSlide.value + 1) % featuredComics.value.length
    }

    // 漫画操作
    const openComicDetail = (comic) => {
      console.log('打开漫画详情:', comic.title)
      // 实际应用中应使用路由跳转
    }

    const readComic = (comic) => {
      console.log('开始阅读:', comic.title)
    }

    const followComic = (comic) => {
      if (followedComics.value.has(comic.id)) {
        followedComics.value.delete(comic.id)
      } else {
        followedComics.value.add(comic.id)
      }
    }

    const isFollowing = (id) => {
      return followedComics.value.has(id)
    }

    const toggleCategory = (key) => {
      const index = activeCategoryTags.value.indexOf(key)
      if (index > -1) {
        activeCategoryTags.value.splice(index, 1)
      } else {
        activeCategoryTags.value.push(key)
      }
    }

    const continueReading = (comic) => {
      console.log('继续阅读:', comic.title, '从', comic.currentChapter)
    }

    onMounted(() => {
      // 自动轮播
      let interval = setInterval(() => {
        nextSlide()
      }, 5000)

      // 添加鼠标悬停暂停自动轮播
      const carousel = document.querySelector('.featured-carousel')
      if (carousel) {
        carousel.addEventListener('mouseenter', () => {
          clearInterval(interval)
        })
        carousel.addEventListener('mouseleave', () => {
          interval = setInterval(() => {
            nextSlide()
          }, 5000)
        })
      }

      // 清理
      return () => {
        clearInterval(interval)
        if (carousel) {
          carousel.removeEventListener('mouseenter', () => {})
          carousel.removeEventListener('mouseleave', () => {})
        }
      }
    })

    return {
      tabs,
      activeTab,
      currentSlide,
      filters,
      activeFilter,
      sortBy,
      myComicsTabs,
      activeMyComicsTab,
      activeCategoryTags,
      featuredComics,
      hotComics,
      featuredCategories,
      newUpdates,
      allCategories,
      readingComics,
      favoriteComics,
      filteredComicsByTags,
      prevSlide,
      nextSlide,
      openComicDetail,
      readComic,
      followComic,
      isFollowing,
      toggleCategory,
      continueReading
    }
  }
}
</script>

<style scoped>
.comics-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.comics-main {
  flex: 1;
  max-width: calc(100% - 240px);
  margin: 0;
  padding: 20px 30px;
}

.comics-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.view-more {
  color: #2ed573;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-more:hover {
  text-decoration: underline;
}

/* 轮播样式 */
.featured-carousel {
  position: relative;
  height: 400px;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  z-index: 2;
}

.carousel-content {
  height: 100%;
  display: flex;
  position: relative;
  cursor: pointer;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
}

.carousel-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.carousel-desc {
  font-size: 16px;
  margin-bottom: 15px;
  opacity: 0.9;
  max-width: 800px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carousel-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  opacity: 0.9;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.carousel-actions {
  display: flex;
  gap: 15px;
}

.btn-read, .btn-follow {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-read {
  background: #2ed573;
  color: #fff;
}

.btn-read:hover {
  background: #20bf6b;
  transform: translateY(-2px);
}

.btn-follow {
  background: #fff;
  color: #333;
}

.btn-follow:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.carousel-prev, .carousel-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev:hover, .carousel-next:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #fff;
  transform: scale(1.2);
}

/* 漫画卡片网格 */
.comics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.comic-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.comic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.comic-cover {
  position: relative;
  width: 100%;
  padding-top: 150%;
  overflow: hidden;
}

.comic-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.comic-card:hover .comic-cover img {
  transform: scale(1.05);
}

.new-badge, .vip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.new-badge {
  background: #ff4757;
  color: #fff;
}

.vip-badge {
  background: #ff9ff3;
  color: #fff;
}

.comic-update {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.comic-title {
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comic-meta {
  padding: 0 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.comic-author {
  color: #666;
}

.comic-tags {
  color: #999;
  font-size: 12px;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

.comic-rating {
  color: #ff6b6b;
  font-weight: 600;
}

/* 分类标签 */
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.category-tag {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.category-tag:hover, .category-tag.active {
  border-color: #ff6b9d;
  color: #ff6b9d;
  background: #fff0f5;
}

/* 我的漫画 */
.my-comics-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.progress {
  height: 100%;
  background: #ff6b9d;
  transition: width 0.3s ease;
}

.comic-progress {
  padding: 0 12px 8px;
  font-size: 14px;
  color: #666;
}

.btn-continue {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: #ff6b9d;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-continue:hover {
  background: #ff4b8a;
}

.favorite-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-button:hover, .filter-button.active {
  border-color: #ff6b9d;
  color: #ff6b9d;
  background: #fff0f5;
}

.sort-select {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

/* 最新更新列表 */
.comics-updates-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.update-item {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.update-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.update-cover {
  width: 120px;
  flex-shrink: 0;
}

.update-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.update-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.update-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.update-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.update-badge {
  background: #ff4757;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.update-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.update-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: #999;
}

.update-chapter {
  color: #ff6b9d;
  font-weight: 500;
}

.btn-brief {
  margin-left: auto;
  padding: 6px 16px;
  border: 1px solid #ff6b9d;
  border-radius: 16px;
  background: #fff;
  color: #ff6b9d;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-brief:hover {
  background: #ff6b9d;
  color: #fff;
}

/* 页脚 */
.app-footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}
</style>